昨天介紹了如何使用 create-next-app 建立 Next.js 13 專案，假如在 create-next-app 的過程，不知道如何回答跳出的問題，可以參考昨天的文章！

在今天開始前先做個小提醒：這個系列的 sample code 會使用 TypeScript。假如沒有使用 TypeScript 的讀者，接下來看到 .ts/.tsx 的檔案，可自動轉成 .js/.jsx！

進入正題：

用 create-next-app 建好專案後，根目錄預設檔案主要分為三大類：

1. /public
2. (/src)/app
3. 設定檔

/public

專案會用到的靜態檔案 ( 主要是圖片 ) 可以放在 /public 中。優點是當我們要指向這些檔案的路徑時，可以使用 baseURL /。

舉例來說，/src/components/Logo.tsx 要插入 /public/logo.svg 這張圖片，圖片路徑只需要指向 /logo.png 就好，不用指向 ../public/logo.png。當專案巢狀結構複雜的時候可以省去很多找檔案相對路徑的時間！

/* src/components/Logo.tsx */
import Image from 'next/image';

export default function Logo() {
return <Image src='/logo.png' alt='logo' width={500} height={500} />;
}

<Image> 是 Next 提供用來提升圖片讀取效能的一個 component，最後幾天會講到。假如想使用一般的 <img> tag 也可以：

/* src/components/Logo.tsx */

export default function Logo() {
return <img src='/logo.png' alt='logo' />;
}

那圖片以外的靜態檔案，像是常見的 favicon、robots.txt、manifext.json 呢？過往 Pages Router 的路由架構下，這些靜態檔案一樣會被放在 /public 中；但 App Router 的路由架構下，這些 metadata 檔案需要放在 /app 的根目錄，這點假如要從 Pages Router 搬到 App Router 時也要特別注意。

Metadata 和 SEO 我們進階篇也會和大家更進一步討論，我們先進入下一個資料夾 (/src)/app 吧！

(/src)/app

app 資料夾中主要存放和 routing 與 Metadata 相關的檔案。不同於以外 Pages Route 的架構，在 /pages 中的檔案會自動視為 route，App Router 則是當 /app 底下資料夾中含有 page.tsx 才會被視為一個 route segment；或是有 route.ts 會被視為一個 api endpoint。

舉例來說，/app/about/pages.tsx 定義的 UI，以開發模式來說，就會出現在 http://localhost:3000/about 這個頁面中；假如另個資料夾 /app/components 中沒有任何 page.tsx，就不會有 http://localhost:3000/components 這個頁面。

( 圖片來源：https://nextjs.org/docs/app/building-your-application/routing/defining-routes )

除了 page.tsx 外，官方還有提供 layout.tsx、loading.tsx 等 routing 相關的特殊檔案，也有 dynamic routes、parallel routes 等不同的路由設計，我們後續介紹 App Router 的 routing convention 時會再跟大家細談！

除了 routing 相關的檔案，metadata 會用到的檔案，像是 favicon、opengraph-image、robots.txt、manifest.json、sitemap.xml 等等，也會放在 /app 的根目錄。

設定檔

最後，設定檔 ( ex: next.config.ts、tsconfig.json、tailwind.config.ts )、package.json、環境變數、.gitignore、middleware.ts、instrumentation.ts 這些檔案也會放在專案根目錄。

了解初步的專案架構後，我們接著來看看 app 資料夾預設含有哪些檔案：

根目錄會看到 global.css、layout.tsx、page.tsx 三個檔案。

• globals.css 用來設定全域 CSS 樣式和放 Tailwind 基本設定內容。

• layout.tsx 是官方提供的 routing 特殊檔案之一，後續會詳細介紹。這邊可以先記得，放在 /app 根目錄的 layout.tsx 我們叫做 Root Layout，用來放所有 route 都會固定出現的 components、設定 metadata，以及修改 initial HTML 的內容。

• page.tsx 前面有提到，負責定義 route segment 的 UI。/app 根目錄中的 page.tsx 就會是 / 的 UI，可以想像成首頁內容 ( 除非你的首頁是 /home 之類的 )。

比方說我的網站網域是 https://my-next-app.io ，那 /app 根目錄的 page.tsx 就會是https://my-next-app.io 的頁面內容！

認識完這些檔案後，你可能會問，那我該怎麼進入開發模式，看我寫的網頁長怎樣呢？我們打開 package.json，會看到官方幫你建了四個 scripts：dev、build、start、lint。

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

只要在終端機輸入 npm run dev，就能進入開發模式了，當然你也可以調整成其他指令。預設的 port 是 3000，假如想自訂 port 的話，可在 dev script 最後加入 --port=XXXX：

"scripts": {
...
  "dev": "next dev --port=5500",
...
},

也簡單說明一下另外三個 scripts 的用途：

• build：打包程式碼
• start：進入 production mode ( 須先跑完 build )
• lint：跑 Next.js 內建的 ESlint 檢查

檔案結構範例

最後，你可能還是有點困惑，到底什麼檔案該放在 /app 裡，什麼該放在 (/src) 根目錄？

按照官方說法，除了上面提到的 /public 和設定檔必須放在根目錄外，其餘像是 /components、/utils、/lib 等等共用工具，並沒有強制必須放在哪邊，可以依照個人或團隊習慣來設計。

Apart from routing folder and file conventions, Next.js is unopinionated about how you organize and colocate your project files.

Next.js - Project Organization and File Colocation

假如想要一些檔案分類方式的參考，Next 官方有提供三種範例：

1. /app 中只放 routing 相關的檔案，其餘放在 ( /src ) 根目錄，類似以往 Pages Router 的作法。!
   
2. 所有 source codes 都放在 /app 裡 ( 就不需要 /src 了 )，與設定檔分離。
   
3. 依照 routes 或 features 分類，各自有各自的 /components、/lib 等等。
   
   ( 圖片來源：https://nextjs.org/docs/app/building-your-application/routing/colocation )

今天的內容就到這邊！這兩天我們了解如何建立 Next.js 13 專案，以及基本的專案結構。下一步我們就來看看 Next.js 13 的改版內容吧！

謝謝大家耐心的閱讀，我們明天見！